package com.devo.icecream.ui.order

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.LocalOverscrollConfiguration
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import coil.compose.AsyncImage
import com.devo.icecream.data.IngredientsBean
import com.devo.icecream.ui.theme.Main
import com.devo.icecream.ui.theme.textGreyColor

//diy成份布局
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun DiyIngredientsLayout(diyIngredients: List<IngredientsBean>) {
    val map = diyIngredients.sortedBy { it.sort }.groupBy { it.categoryName }.iterator()
    Column(modifier = Modifier.padding(24.dp)) {

        Text(
            modifier = Modifier.fillMaxWidth(),
            text = "您的订单详情",
            textAlign = TextAlign.Start,
            style = MaterialTheme.typography.h2
        )

        Spacer(modifier = Modifier.height(16.dp))

        CompositionLocalProvider(LocalOverscrollConfiguration provides null) {

            LazyColumn(
                modifier = Modifier.weight(1f),
                contentPadding = PaddingValues(bottom = 16.dp)
            ) {
                while (map.hasNext()) {
                    val item = map.next()
                    item {
                        Text(
                            modifier = Modifier.padding(top = 16.dp, bottom = 16.dp),
                            text = item.key,
                            style = MaterialTheme.typography.h3
                        )
                    }

                    itemsIndexed(item.value) { inx, data ->
                        if (inx > 0) {
                            Spacer(modifier = Modifier.height(32.dp))
                        }
                        IngredientsItemLayout(data)
                    }
                }
            }

        }

        Spacer(modifier = Modifier.height(20.dp))

        Text(
            modifier = Modifier.fillMaxWidth(),
            text = "上滑查看更多",
            color = textGreyColor,
            fontSize = 24.sp,
            textAlign = TextAlign.Center
        )
    }

}

@Composable
private fun IngredientsItemLayout(data: IngredientsBean) {
    Row(
        modifier = Modifier
            .height(100.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Row(
            modifier = Modifier
                .fillMaxHeight()
                .weight(1f),
            verticalAlignment = Alignment.CenterVertically
        ) {
            AsyncImage(
                modifier = Modifier
                    .fillMaxHeight()
                    .clip(RoundedCornerShape(16.dp))
                    .aspectRatio(1f)
                    .background(Main),
                model = data.picture,
                contentDescription = "",
                contentScale = ContentScale.Crop
            )

            Spacer(modifier = Modifier.width(16.dp))

            Text(text = data.name, fontSize = 28.sp, fontWeight = FontWeight.Bold)

        }

        Column(
            modifier = Modifier.weight(1f),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {

            Text(text = "份数", style = MaterialTheme.typography.body1)

            Spacer(modifier = Modifier.height(16.dp))

            Text(
                text = "${data.chose}",
                fontSize = 24.sp,
                textAlign = TextAlign.Center
            )
        }

        Column(
            modifier = Modifier.weight(1f),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {

            Text(text = "价格", style = MaterialTheme.typography.body1)

            Spacer(modifier = Modifier.height(16.dp))

            Text(
                text = "${data.price * data.chose} 元",
                fontSize = 24.sp,
                textAlign = TextAlign.End,
                fontWeight = FontWeight.Bold
            )
        }


    }
}
